<template>
  <div class="tt_order"
  :style="{'padding-bottom': status._type != -1 ? '54px':''}"
  >
    <order-header
    :message="message"
    :_msg="status._msg"
    :_type="status._type"
    ></order-header>
    <order-address
    :user="user"
    :_type="status._type"
    ></order-address>
    <order-com
    :cartInfo="cartInfo"
    ></order-com>
    <order-info
    :order_id="order_id"
    :status="status"
    :info="info"
    ></order-info>

    <div class="tk" v-if="status._type != -1">
      <div class="tk_btn" v-if="status._type != -1 && status._type != 0" @click="refundOrder">申请退款</div>
      <div class="cancel" @click="cancelOrder" v-if="status._type == 0">取消订单</div>
      <div class="tk_btn pay" @click="show = true"  v-if="status._type == 0">立即支付</div>
    </div>

    <van-popup
      v-model="show"
      closeable
      :round="true"
      position="bottom"
      :style="{ height: '36%' }"
    >
      <div class="pay_box">
        <div class="p_title">选择支付方式</div>
        <ul class="type">
          <li class="weixi" @click="goPayFn('weixin')">
            <div class="left">
              <div class="ty_icon">
                <img src="../../../assets/icon/common/wei.png" alt="" />
              </div>
              <div class="ty_inf">
                <div class="ht">微信支付</div>
                <div class="hb">使用微信快捷支付</div>
              </div>
            </div>
            <div class="rigth">
              <van-icon name="arrow" />
            </div>
          </li>
          <li class="yue" @click="goPayFn('yue')">
            <div class="left">
              <div class="ty_icon">
                <img src="../../../assets/icon/common/ye.png" alt="" />
              </div>
              <div class="ty_inf">
                <div class="ht">余额支付</div>
                <div class="hb">
                  当前可用余额为:<span class="y_count">
                    {{ userInfo.now_money }}</span
                  >
                </div>
              </div>
            </div>
            <div class="rigth">
              <van-icon name="arrow" />
            </div>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
import { Popup } from "vant";

import OrderHeader from "@/views/order/detail/OrderHeader.vue";
import OrderAddress from "@/views/order/detail/Address.vue";
import OrderCom from "@/views/order/detail/OrderCom.vue";
import OrderInfo from "@/views/order/detail/OrderInfo.vue";

export default {
  data() {
    return {
      order_id: "",
      paytype:"",
      message:{},
      user:{},
      cartInfo:[],
      info:{},
      status:{},
      show:false,
      userInfo:{},
    };
  },
  created() {
    this.order_id = this.$route.params.id;
    this.initDetail(this.order_id)
    this.getUserInfo()
  },

  components: {
    OrderHeader,
    OrderAddress,
    OrderCom,
    OrderInfo,
  },
  methods: {
    initDetail(id) {
      let token = localStorage.getItem("token");
      axios({
        url: `/api/order/detail/${id}`,
        method: "get",
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        let {status , data } = res.data
        if(status == 200){
          this.message = {
            add_time_y:data.add_time_y,
            add_time_h:data.add_time_h,
            status_pic:data.status_pic
          }

          this.user = {
            user_address:data.user_address,
            user_phone:data.user_phone,
            real_name:data.real_name
          }

          this.info = {
            total_price:data.total_price,
            
            _add_time:data._add_time
          }

          this.status = data._status
          this.cartInfo = data.cartInfo
        }
        console.log("成功",res.data)
      });
    },

    cancelFn() {
      
      let token = localStorage.getItem("token");

      axios({
        url: `/api/order/cancel`,
        method: "POST",
        data: {
          id: this.order_id,
        },
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        Toast.success({
           message:"取消成功"
        })
        setTimeout(()=>{
          this.$router.push('/order/list/'+this.status._type)
        },300)
      });
    },

    cancelOrder() {
      Dialog.confirm({
        title: "提示",
        message: "你确定要取消订单吗",
      })
        .then(() => {
          this.cancelFn();
        })
        .catch(() => {
          // on cancel
        });
    },

    refundOrder(){
      this.$router.push('/order/refund/'+this.order_id)
    },

     goPayFn(paytype) {
      this.paytype = paytype;
      let token = localStorage.getItem("token");
      axios({
        url: `/api/order/pay`,
        method: "POST",
        data: {
          uni: this.order_id,
          paytype: this.paytype,
          from: "weixinh5",
        },
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        console.log("支付吧", res.data);
        if (res.data.msg.includes("错误")) {
          this.$paytoast.show('支付中....',500)
          setTimeout(()=>{
            this.$loadtoast.show(res.data.msg,500)
          },500)
        }else if(res.data.msg.includes("余额不足")){
          this.$paytoast.show('支付中....',500)
          setTimeout(()=>{
            this.$toast.show("余额不足",500)
          },500)
        }
        
        else{
          this.$paytoast.show('支付中....',500)
          
          setTimeout(()=>{
            Toast.success(res.data.msg);
            this.initDetail(this.order_id )
           
          },500)
        }
      });

      this.show = false;
    },

    getUserInfo() {
      let token = localStorage.getItem("token");
      axios({
        url: `/api/userinfo`,
        method: "get",

        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        console.log("用户", res.data);
        this.userInfo.now_money = res.data.data.now_money;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// .tt_order {
//   padding-bottom: 54px;
// } 

.tk {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 43px;
  width: 100%;
  background-color: #fff;
  z-index: 100;
  .tk_btn {
    width: 80px;
    height: 35px;
    border: 1px solid #aaaa;
    color: #aaa;
    position: absolute;
    top: 50%;
    margin-top: -17.5px;
    right: 25px;
    font-size: 15px;
    border-radius: 17.5px;
    text-align: center;
    line-height: 35px;
  }
  .tk_btn.pay{
    background-color: #e93323;
    color: #fff;
    border-color: #e93323;
  } 
  .cancel{
    width: 80px;
    height: 35px;
    border: 1px solid #aaaa;
    color: #aaa;
    position: absolute;
    top: 50%;
    margin-top: -17.5px;
    right:110px;
    font-size: 15px;
    border-radius: 17.5px;
    text-align: center;
    line-height: 35px;
  }
}

.pay_box {
  width: 100%;

  .p_title {
    padding: 0 15px;
    text-align: center;
    line-height: 60px;
    height: 60px;
    font-weight: 600;
    font-size: 17px;
    color: #282828;
    border-bottom: 0.01rem solid #eee;
  }
  .type {
    padding-left: 15px;
    li {
      height: 65px;
      padding-right: 15px;
      display: flex;
      justify-content: space-between;
      border-bottom: 0.01rem solid #eee;
      .left {
        display: flex;
        align-items: center;
        .ty_icon {
          width: 23px;
          height: 23px;
          margin-right: 15px;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        .ty_inf {
          .ht {
            font-size: 16px;
            color: #282828;
          }
          .hb {
            font-size: 12px;
            color: #999;
            .y_count {
              color: #ffa217;
            }
          }
        }
      }

      .rigth {
        height: 65px;
        line-height: 65px;
        font-size: 16px;
        color: #a7a7a7;
      }
    }
  }
}
</style>

